<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue记事本综合</title>
    <!--    引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F4F4F4;
        }

        #todoapp {
            background-color: #fff;
            margin: auto;
            width: 460px;
            /*边框阴影*/
            box-shadow: darkgrey 10px 10px 30px 5px;
        }

        .header {
            text-align: center;
            font-size: 20px;
            font-family: "Microsoft Himalaya";
            /*字体间距*/
            letter-spacing: 10px;
        }

        .new-dodo {
            /*460-32-2*/
            width: 426px;
            /*内边距*/
            margin: 7px;
            height: 54px;
            font-size: 30px;
            color: #B7B7B7;
            /*隐藏边框*/
            border-style: hidden;
            /*隐藏点击后的边框*/
            outline: none;
        }

        /*伪元素，修改input中placeholder的属性*/
        .new-dodo::-webkit-input-placeholder {
            font-size: 25px;
            font-family: "Microsoft New Tai Lue";
            color: #B7B7B7;
        }

        .main {
            /*上边框*/
            border-top: 3px solid #F8F8F8;
            height: 54px;
            /*左边空隙*/
            padding-left: 15px;
            /*上下居中*/
            line-height: 47px;
            font-size: 30px;
            color: #B7B7B7;
        }

        li {
            list-style-type: none;
        }

        .destroy {
            border-style: hidden;
            background-color: #FFFFFF;
            color: #D8A6A9;
            font-size: 20px;
            line-height: 47px;
            /*隐藏*/
            display: none;
            float: right;
            /*外边距*/
            margin-right: 30px;
            outline: none;
        }

        .main label {
            padding-left: 20px;
        }

        .main:hover .destroy {
            display: inline;
        }

        .footer {
            /*上边框*/
            border-top: 3px solid #F8F8F8;
            height: 35px;
            /*左边空隙*/
            padding-left: 15px;
            /*上下居中*/
            line-height: 35px;
            font-size: 20px;
            color: #B7B7B7;
        }

        .clear {
            float: right;
            margin-right: 25px;
        }

        .clear:hover {
            cursor: default;
        }
    </style>
</head>
<body>
    <div id="todoapp">
        <!-- 主题框架-->
        <section>
            <header class="header">
                <h1>记事本</h1>
                <!--            autofocus：页面加载完成时，自动获取脚垫-->
                <!--            autocomplete：输入文本时，显示浏览器以前输入过的记录-->
                <input type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-dodo"
                       v-model="input" @keyup.enter="add">
            </header>
        </section>
        <!--    列表区域-->
        <section>
            <ul>
                <li class="main" v-for="(item,index) in items">
                    <div>
                        <span>{{ index + 1 }}.</span>
                        <label>{{ item }}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </li>
            </ul>
        </section>
        <!--        统计清空-->
        <footer class="footer">
            <span  v-show="items.length!=0">
                <span style="color: #0053C4;font-weight: 600">{{ items.length }}</span> item
            </span>
            <span class="clear" @click="clear">clear</span>
        </footer>
    </div>

    <script>
        // vue代码
        var app = new Vue({
            el: "#todoapp",
            data: {
                items: ["吃饭", "睡觉", "打游戏"],
                input: ""
            },
            methods: {
                add: function () {
                    this.items.push(this.input);
                    this.input = "";
                },
                remove: function (index) {
                    this.items.splice(index, 1);
                },
                clear: function () {
                    this.items = [];
                }
            }
        })
    </script>
</body>
</html>